<template>
  <el-card shadow="never" header="修改密码">
    <el-alert
      title="密码更新成功后，您将被重定向到登录页面，您可以使用新密码重新登录。"
      type="info"
      show-icon
      style="margin-bottom: 15px"
    />
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      style="margin-top: 20px"
    >
      <el-form-item label="当前密码" prop="oldPassword">
        <el-input
          v-model="form.oldPassword"
          type="password"
          show-password
          placeholder="请输入当前密码"
        ></el-input>
        <div class="el-form-item-msg">必须提供当前登录用户密码才能进行更改</div>
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input
          v-model="form.password"
          type="password"
          show-password
          placeholder="请输入新密码"
        ></el-input>
        <sc-password-strength v-model="form.newPassword"></sc-password-strength>
        <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
      </el-form-item>
      <el-form-item label="确认新密码" prop="confirmNewPassword">
        <el-input
          v-model="form.confirmNewPassword"
          type="password"
          show-password
          placeholder="请再次输入新密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">保存密码</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      form: {
        oldPassword: "",
        password: "",
        confirmNewPassword: "",
      },
      rules: {
        oldPassword: [{ required: true, message: "请输入当前密码" }],
        password: [{ required: true, message: "请输入新密码" }],
        confirmNewPassword: [
          { required: true, message: "请再次输入新密码" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  },
  methods: {
    async submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await this.$API.auth.updatePassword.get(this.form);
          if (res.code == 0) {
            this.$message.success("密码修改成功");
          } else {
            let errdata = this.$TOOL.response(res);
            this.$alert(
              this.$TOOL.json.get("", errdata, "message"),
              this.$TOOL.json.get("", errdata, "title"),
              {
                type: "error",
                confirmButtonText: "确定",
                dangerouslyUseHTMLString: true,
                showCancelButton: false,
              }
            );
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>
